<template>
    <div class="container">
        <div class="search-content">
        <el-form :model="searchContent" ref="searchFrom" :inline="true">
            <el-form-item prop="app_class" label="所属程序：">
                <el-select v-model="searchContent.app_class" placeholder="请选择状态">
                    <el-option
                        v-for="item in appClassType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="store_name" label="图标名称：">
                <el-input v-model="searchContent.category_name" placeholder="图标名称" maxlength="32"></el-input>
            </el-form-item>
            <el-form-item prop="consult_type" label="是否展示：">
                <el-select v-model="searchContent.is_show" placeholder="请选择">
                    <el-option
                        v-for="item in [{value: '1', label: '是'}, {value: '0', label: '否'}]"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
        </div>
        <div class="search-list">
            <el-table 
                border 
                :data="dataList" 
                :height="oHeight" 
                :header-cell-class-name="hdCellClassName" 
                :row-class-name="tableRowClassName"
                @row-click="onRowClick"
            >
                <el-table-column 
                  label="排序"
                  min-width="100"
                  align="center"
                  #default="{row}"
                >
                    <el-input 
                    v-model.number="row.category_sort" 
                    class="input-sort" 
                    align=center 
                    placeholder="排序"
                    @blur="handleUpdate(row, 'category_sort')"
                    @change="handleChange(row)"
                  ></el-input>
                </el-table-column>
                <el-table-column 
                  prop="app_class_name" 
                  label="所属程序"
                  min-width="160"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  prop="belongs_page" 
                  label="所属页面"
                  min-width="120"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  prop="category_name" 
                  label="图标名称"
                  min-width="160"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  label="图标"
                  min-width="130"
                  align="center"
                  #default="{row}"
                >
                    <el-image class="image_path" :src="row.image_path" fit="cover" lazy>
                        <div slot="error" class="image-slot">
                           <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </el-table-column>
                <el-table-column 
                  prop="is_top"
                  label="是否展示"
                  min-width="140"
                  align="center"
                >
                  <template #default="{row}">
                      <el-switch
                        v-model="row.is_show"
                        active-value="1"
                        inactive-value="0"
                        @change="handleUpdate(row, 'is_show')"
                        size="small"
                        active-color="#13ce66">
                      </el-switch>
                  </template>
                </el-table-column>
                <el-table-column 
                  prop="pc_name" 
                  label="操作"
                  min-width="140"
                  align="center"
                  #default="{row}"
                >
                    <el-button type="primary" @click="handleIcon(row)">编辑</el-button>
                    <el-button type="danger" @click="messageBox(row.id)">删除</el-button>
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom">
            <div class="btn-group">
            </div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.curpage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
        <IconDialog :options="options" v-on:closeDialog="closeDialog" v-on:getData="getData"></IconDialog>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import {dateFormatter} from "@/common/js/util";
import IconDialog from './icon-dialog';
export default {
    props: ["showDialog"],
    data() {
        return {
            searchContent: {
                app_class: null,      // 所属程序ID
				category_name: null,  // 图标名称
				is_show: null,        // 是否展示
                is_search: false      // 是否处于搜索
            },
            currIndex: null,          // 当前操作的行索引
            stateList: [
                {label: '全部 ', value:''},
				{label: '未开通 ', value: 1},
				{label: '已开通', value: 2}
            ],
            pageArr: {
                curpage: 1,           // 当前页码
                pageSize: localStorage.getItem('pageSize') * 1 || 10,         // 每页显示数量
                total: 0              // 数据总数
            },
            dataList: [],             // 列表数据
            oHeight: 600,             // 默认高度, 其值会在mounted中的resize进行重新计算
            appClassType: [
                {label: '元通汽车小程序', value: '1'},
                {label: '特选好物购', value: '2'},
                {label: '元通APP', value: '3'}
            ],
            options: {                 // 子组件抽屉参数
                visible: false,
                row: {}
            }
        }
    },
    computed: {
        getState() {
            return function(val) {
                return this.stateList.filter(item => item.value == val)[0].label;
            }
        }
    },
    components: {IconDialog},
    methods: {
        hdCellClassName() {
            return 'hdCellStyle'
        },
        tableRowClassName({row, rowIndex}) {
            // 把每一行的索引放进row
            row.index = rowIndex;
        },
        onRowClick(row) {
            this.currIndex = row.index
        },
        _dateFormatter(row) {
            return dateFormatter("YYYY-MM-DD HH:mm:ss", row.pc_addtime*1000)
        },
        async handleUpdate(row, key = 'category_sort') {
            try {
                let datas = { icon_id: row.id }, res
                if (key === 'category_sort') {
                    if (!row.isChange) return
                    datas['sort_num'] = row[key]
                    res = await this.$http.post('/admin/pageIcon/index.php?act=icon&op=setIconSort', datas)
                } else {
                    datas['show_tag'] = parseInt(row[key]) > 0 ? "show" : "unshow"
                    res = await this.$http.post('/admin/pageIcon/index.php?act=icon&op=setIconShow', datas)
                }
                if(res.code == 1) {
                    this.$message.success(res.msg)
                    if (key === 'category_sort') this.getData()
                } else {
                    this.$message.error(res.msg);
                }
            } catch (error) {
                this.$message.error(error);
            }
        },
        handleChange(row) {
            row.isChange = true;
        },
        async getData() {
            let datas = {
                each_num: this.pageArr.pageSize,
                page: this.pageArr.curpage
            }
            if(this.searchContent.is_search) {
                datas = {...datas, ...this.searchContent};
            }
            const res = await this.$http.post('/admin/pageIcon/index.php?act=icon&op=list', datas)
            if(res.code == 1) {
                this.dataList = res.data.list
                this.pageArr.total = parseInt(res.data.totalNum)
            }
        },
        messageBox(icon_id) {
            this.$confirm('确定删除该图标信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delRowData(icon_id);
            }).catch()
        },
        async delRowData(icon_id = 0) {
            // 删除
            if(!icon_id) return;
            const res = await this.$http.post('/admin/pageIcon/index.php?act=icon&op=delIcon', {icon_id})
            if(res.code == 1) {
                this.$message({
                    type: "success",
                    message: "删除成功"
                })
                this.getData();
            }
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
			this.pageArr.pageSize = pageSize;
			this.pageArr.curpage = 1;
			this.getData();
        },
        handleCurrentChange(page) {
			this.pageArr.curpage = page;
			this.getData();
        },
        handleSearch() {
            if(!this.searchContent.is_search) this.searchContent.is_search = true;
            this.pageArr.curpage = 1;
            this.getData();
        },
        handleReset() {
            this.$refs.searchFrom.resetFields();
            if(!this.searchContent.is_search) return;
            this.searchContent = {
                is_search: false
            }
            this.pageArr.curpage = 1;
            this.getData();
        },
        handleIcon(row = {}) {
            this.options.row =  { ...row };
            this.options.visible = true;
        },
        closeDialog() {
            this.options.row = {}; // 这里不可为null, 否则 子组件无法监听 options.row
            this.options.visible = false;
            this.$emit("showDialog")
        }
    },
    created() {
        this.$parent.showButton = true;
        this.getData()
    },
	mounted() {
		resize(this)
	},
	watch: {
        "showDialog": {
            immediate: true,
            handler: function(val, oldVal){
                if(val) this.handleIcon();
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    /deep/.search {
        &-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-label {
                font-size: 14px;
            }
            &-input {
                width: 200px;
            }
            .el-form-item {
                margin-bottom: 10px;
            }
        }
    }
    /deep/.search-list {
        .input-sort input {
            width: 60px;
            text-align: center;
        }
    }
    /deep/.bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn-bottom {
            background: #409EFF;
            color: #fff;
            border: 0;
            font-size: 14px;
            padding: 5px 8px;
            border-radius: 3px;
            display: inline-block;
        }
    }
    /deep/.image_path {
        width: 60px;
        height: 60px;
        display: flex;
        margin: 0 auto;
        align-items: center;
        justify-content: space-around;
    }
    /deep/.state1{
        color: #67C23A;
    }
    /deep/.state2{
        color: #999;
    }
}
</style>
